<template>
  <div class="r-overview-box" :style="{ height: heights + 'px' }">
    <a-row type="flex">
      <a-col :span="24" class="r-overview-box-tab">
        <rTitle :tit="'招聘数据概览'">
          <div slot="left">
            数据周期：2021.10-2021.05.16
          </div>
          <div slot="right">
            <a-select default-value="lucy" style="width: 180px" @change="handleChange">
              <a-select-option value="lucy">
                周
              </a-select-option>
            </a-select>
          </div>
        </rTitle>
        <div class="num">
          <div class="num-box" v-for="item in numArr" :key="item.type">
            <div class="num-top">{{ item.num }}</div>
            <div class="num-bottom">{{ item.name }}</div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-between">
      <a-col :span="12">
        <div class="r-overview-box-tab mr7">
          <rTitle :tit="'我的面试'" />
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="未开始">
              <interview />
            </a-tab-pane>
            <a-tab-pane key="2" tab="待评价">
              <interview />
            </a-tab-pane>
          </a-tabs>
          <div class="tab-btn">
            <a-button
              type="link"
              style="
      font-size: 16px;"
            >
              查看全部
            </a-button>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="r-overview-box-tab ml7">
          <rTitle :tit="'新投简历'" />
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="全部">
              <resume />
            </a-tab-pane>
            <a-tab-pane key="2" tab="自主投递">
              <resume />
            </a-tab-pane>
            <a-tab-pane key="3" tab="内推">
              <resume />
            </a-tab-pane>
            <a-tab-pane key="4" tab="渠道">
              <resume />
            </a-tab-pane>
          </a-tabs>
          <div class="tab-btn">
            <a-button
              type="link"
              style="
      font-size: 16px;"
            >
              查看全部
            </a-button>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-between">
      <a-col :span="12" style="margin-top:-96px;">
        <div class="r-overview-box-tab mr7">
          <rTitle :tit="'渠道数据排行榜'" />
          <tables />
        </div>
      </a-col>
      <a-col :span="12">
        <div class="r-overview-box-tab ml7">
          <rTitle :tit="'浏览记录'" />
          <tables />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import rTitle from "../component/rTitle";
import interview from "./component/interview";
import resume from "./component/resume";
import tables from "./component/table";
export default {
  components: {
    rTitle,
    interview,
    resume,
    tables
  },
  data() {
    return {
      heights: 0,
      numArr: [
        { type: "1", name: "待处理", num: 0 },
        { type: "2", name: "已投递", num: 0 },
        { type: "3", name: "已约面", num: 0 },
        { type: "4", name: "offer沟通", num: 0 },
        { type: "5", name: "已入职", num: 0 }
      ]
    };
  },
  computed: {
    ...mapState(["admin", "hr"])
  },
  created() {
    this.$store.commit("recruitment/isCancel", null);
  },
  mounted() {
    this.heights = document.querySelector(".main-content").offsetHeight;
  },
  methods: {
    handleChange() {},
    callback() {}
  }
};
</script>

<style lang="scss" scoped>
::v-deep .ant-tabs-bar {
  border: 0 !important;
}
::v-deep .ant-tabs-ink-bar {
  width: 0 !important;
}
.r-overview-box {
  width: 100%;
  background: #f4f6fa;
  .mr7 {
    width: calc(100% - 7px);
  }
  .ml7 {
    width: calc(100% - 7px);
    margin-left: 7px;
  }
  .r-overview-box-tab {
    background: #fff;
    padding: 14px 30px;
    box-sizing: border-box;
    margin-bottom: 16px;
    .num {
      width: 100%;
      height: 48px;
      margin-top: 36px;
      margin-bottom: 32px;
      display: flex;
      .num-box {
        width: 164px;
        .num-top {
          font-size: 24px;
          font-weight: bold;
          color: #55565d;
        }
        .num-bottom {
          color: #767885;
        }
      }
    }
    .tab-btn {
      text-align: center;
    }
  }
}
</style>
